import React from "react";
import {Button,Card,Col,Divider,Form,Input,Row,message,notification,} from "antd";
import { setPassword } from "@/services/user";
import Loading from "@/components/Loading";
import { formatMessage } from "umi-plugin-react/locale";
import { logout } from "@/services/logout";
import { connect } from 'react-redux'

class SettingForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false, // 用户详细信息的加载状态，用户页面loading效果
      submiting: false, // 表单提交状态
    };
  }

  componentDidMount() {
    // this.loadData(this.state.id);
  }

  handleSubmit = async e => {
    e.preventDefault();
    if (this.submiting) {
      return;
    }
    // setState为异步动作，直接设置submiting变量作为限制
    this.submiting = true;
    this.setState({
      submiting: true
    });
    this.props.form.validateFields(async (err, fieldsValue) => {
      if (err) {
        this.submiting = false;
        this.setState({
          submiting: false
        });
        return;
      }

      // if(fieldsValue.password == fieldsValue.password_new){
      //   this.submiting = false;
      //   this.setState({
      //     submiting: false
      //   });

      //   message.error('新密码不能与原密码相同');
      //   return;
      // }

      if(fieldsValue.password_new != fieldsValue.password_sure){
        this.submiting = false;
        this.setState({
          submiting: false
        });

        message.error('两次密码输入不一致');
        return;
      }

      const params = {
        password:fieldsValue.password,
        password_new:fieldsValue.password_new,
        password_sure:fieldsValue.password_sure
      };
      // eslint-disable-next-line @typescript-eslint/no-unused-vars
      setPassword(params).then(res => {
        this.submiting = false;
        this.setState({
          submiting: false
        });
        if (res && res.status !== 200) {
          if(res.status == -4){
            notification.error({
              message: res.msg
            });
          }
          if(res.status == -3){
            notification.error({
              message: "两次密码输入不一致"
            });
          }
          if(res.status == -2){
            notification.error({
              message: "原密码输入错误"
            });
          }
          if(res.status == -1){
            notification.error({
              message: "新密码不能与原密码相同"
            });
          }
          
        } else {
          // console.log(res)
          notification.success({
            message: "更新成功"
          });

            this.props.dispatch({
              type: 'login/logout',
            });
          logout();
    

          // dispatch({
          //   type: 'login/logout',
          // });
          // logout();
          // this.props.history.goBack();
        }
      });
    });
  };


  render() {
    const { getFieldDecorator } = this.props.form;
    const { submiting } = this.state;
    const titleExtraButton = (
      <Row type="flex" gutter={12} align="middle">
        <Col>
          <Button
            type="primary"
            loading={submiting}
            onClick={this.handleSubmit}
          >
            提交
          </Button>
        </Col>
        <Col>
          <Button onClick={this.props.history.goBack}>返回</Button>
        </Col>
      </Row>
    );
    const { detail, uploading, uploadedAvatar, loading } = this.state;
    const rowGutter = [16, 16];
    return (
      <Card title="修改密码">
        {loading ? (
          <Loading />
        ) : (
          <Form layout="horizontal" labelCol={{ span: 4 }}
          wrapperCol={{ span: 14 }}>
            <Divider orientation="left" dashed>
              <span style={{ fontSize: 12 }}>基本信息</span>
            </Divider>
            <Row type="flex" gutter={rowGutter}>
              <Col span={14}>
                <Row>
                  <Col span={14}>
                    <Form.Item label="账号密码：">
                      {getFieldDecorator("password", {
                        rules: [
                          {
                            required: true,
                            message: formatMessage({
                              id: "请输入原密码"
                            })
                          }
                        ]
                      })(<Input.Password />)}
                    </Form.Item>
                  </Col>
                </Row>

                <Row>
                  <Col span={14}>
                    <Form.Item label="新密码：">
                      {getFieldDecorator("password_new", {
                        rules: [
                          {
                            required: true,
                            message: formatMessage({
                              id: "请输入新密码"
                            })
                          }
                        ]
                      })(<Input.Password />)}
                    </Form.Item>
                  </Col>
                </Row>

                <Row>
                  <Col span={14}>
                    <Form.Item label="确认密码："extra="">
                      {getFieldDecorator("password_sure", {
                        rules: [
                          {
                            required: true,
                            message: formatMessage({
                              id: "请再次输入新密码"
                            })
                          }
                        ]
                      })(<Input.Password  />)}
                    </Form.Item>
                  </Col>
                </Row>

              </Col>
            </Row>
            <Row>
              <Col span={2}>
                </Col>
              <Col span={14}>
                {titleExtraButton}
              </Col>
            </Row>
          </Form>
        )}
      </Card>
    );
  }
}

const WrappedSettingForm = Form.create({ name: "Admin_setting" })(
  SettingForm
);
export default connect(null, null)(WrappedSettingForm);
